/**
 * 此文件通过index.html文件中的<script>标签加载，
 * 并将在该窗口的渲染进程中执行。由于`nodeIntegration`已关闭
 * 且`contextIsolation`已开启，此进程中无法使用Node.js API。
 * 请使用`preload.js`中的contextBridge API从主进程中
 * 暴露Node.js功能。
 */

// const setButton = document.getElementById('setFull')
// setButton.addEventListener('dblclick', () => {
//   window.electronAPI.setFull()
// })



window.electronAPI.wsUserList((value) => {
  console.log('wsUserList:', value)
  //获取的数据以表格形式展示
  // 创建表格
  const table = document.createElement('table');
  table.className = 'layui-table';
  
  // 创建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  const header = document.createElement('th');
  header.textContent = '在线用户列表';
  headerRow.appendChild(header);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 创建表格内容
  const tbody = document.createElement('tbody');
  value.forEach(user => {
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    cell.textContent = user;
    row.appendChild(cell);
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  // 清空并添加新表格
  const app = document.getElementById('app');
  const oldTable = app.querySelector('.layui-table');
  if(oldTable) {
    oldTable.remove();
  }
  app.appendChild(table);
  // 添加删除按钮列
  const deleteHeader = document.createElement('th');
  deleteHeader.textContent = '操作';
  headerRow.appendChild(deleteHeader);

  // 为每行添加删除按钮
  tbody.querySelectorAll('tr').forEach(row => {
    const deleteCell = document.createElement('td');
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'layui-btn layui-btn-danger layui-btn-sm';
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = () => {
      const userId = row.querySelector('td').textContent;
      // 添加确认提示
      if(confirm(`确定要删除用户 ${userId} 吗?`)) {
        window.electronAPI.deleteUser(userId);
      }
    };
    deleteCell.appendChild(deleteBtn);
    row.appendChild(deleteCell);
  });
})